<script>
import store from "@/store";
import path from "path-browserify";
import fun from "@/unit/function";
import elementResizeDetectorMaker from "element-resize-detector";
import { defineComponent } from "vue";
import { addVisitedView, removeVisitedView } from "@/unit/router";

export default defineComponent({
  data() {
    return {
      selectRoute: {},
      arrowBtnShow: false,
    };
  },
  computed: {
    currentTab() {
      return store.getters["webset/menuSelected"][0];
    },
    visitedView() {
      return store.getters["visitedView/visitedView"];
    },
    permissionRoutes() {
      return store.getters["menu/permissionRoutes"];
    },
    lang() {
      return store.getters["webset/lang"];
    },
  },
  watch: {
    $route(newVal) {
      addVisitedView(newVal)
        .then((route) => {
          this.scrollToBar(route.meta?.title);
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.initRoute();
    const erd = elementResizeDetectorMaker();
    this.$nextTick(() => {
      const scrollboxWidth = this.$refs.scrollbox.offsetWidth;
      erd.listenTo(this.$refs.scrollbar, (e) => {
        this.arrowBtnShow = e.offsetWidth < scrollboxWidth;
      });
    });
  },
  methods: {
    checkArrowBtnShow() {
      const scrollbar = this.$refs.scrollbar.offsetWidth;
    },
    scrollToBar(title) {
      const elements = document.querySelectorAll(".tab-item");
      let currentEle = null;
      for (let index = 0; index < elements.length; index++) {
        const temp = elements[index];
        if (fun.trim(temp.innerText, "all") === title) {
          currentEle = elements[index];
          break;
        }
      }
      const scrollbar = this.$refs.scrollbar;
      scrollbar.scrollTo(currentEle?.offsetLeft || 0, 0);
    },
    initRoute() {
      this.checkArrowBtnShow();
      const affixedRoutes = this.findAffixedRoutes(this.permissionRoutes, "/");
      affixedRoutes.forEach((it) => {
        addVisitedView(it);
      });
      addVisitedView(this.$route)
        .then((route) => {
          this.$nextTick(() => {
            this.scrollToBar(route.meta?.title);
          });
        })
        .catch(() => {});
    },
    findAffixedRoutes(routes, basePath) {
      const temp = [];
      routes.forEach((it) => {
        if (!it.hidden && it.meta && it.meta.affix) {
          temp.push({
            name: it.name,
            fullPath: it.fullPath,
            path: it.path,
            meta: it.meta,
          });
        }
        if (it.children && it.children.length > 0) {
          const tem = this.findAffixedRoutes(
            it.children,
            path.resolve(basePath, it.path)
          );
          temp.push(...tem);
        }
      });
      return temp;
    },
    clickItem(path) {
      const scrollbar = this.$refs.scrollbar;
      scrollbar.scrollTo(scrollbar.offsetLeft, 0);
      this.$router.push(path);
    },
    clickIcon(fullPath) {
      const findItem = this.visitedView.find((it) => {
        return it.fullPath === fullPath;
      });
      if (findItem) {
        removeVisitedView(findItem).then(() => {
          if (this.currentTab === fullPath) {
            const p =
              this.visitedView[this.visitedView.length - 1].fullPath || "/";
            this.$router.replace(p);
          }
        });
      }
    },
    clickArrowLeft() {
      const scrollbar = this.$refs.scrollbar;
      const scrollX = scrollbar.scrollLeft || 0;
      scrollbar.scrollTo(Math.max(0, scrollX - 200), 0);
    },
    clickArrowRight() {
      const scrollbar = this.$refs.scrollbar;
      const scrollX = scrollbar.scrollLeft || 0;
      scrollbar.scrollTo(scrollX + 200, 0);
    },
  },
});
</script>

<template>
  <div class="nav-tabs-container">
    <div
      class="arrow-btn arrow-btn-left"
      v-if="arrowBtnShow"
      @click="clickArrowLeft"
    >
      <caret-left-outlined />
    </div>
    <div
      ref="scrollbar"
      class="nav-tabs-box"
      :class="{ 'nav-tab-margin': arrowBtnShow }"
    >
      <div ref="scrollbox" class="nav-tabs-scroll">
        <a-button
          v-for="item in visitedView"
          :key="item.name"
          :class="{
            'tab-item-active': currentTab == item.fullPath,
            'is-affix': item.meta.affix,
          }"
          class="tab-item"
          type="primary"
          @click="clickItem(item.fullPath)"
        >
          {{ lang === "en" ? item.meta.enTitle : item.meta.title }}
          <span
            v-if="!item.meta.affix"
            class="icon"
            @click.stop="clickIcon(item.fullPath)"
          >
            <close-circle-outlined />
          </span>
        </a-button>
      </div>
    </div>
    <div
      class="arrow-btn arrow-btn-right"
      v-if="arrowBtnShow"
      @click="clickArrowRight"
    >
      <caret-right-outlined />
    </div>
  </div>
</template>

<style lang='less' scoped>
.nav-tabs-container {
  margin: 7px 15px;
  position: relative;
  .arrow-btn {
    position: absolute;
    height: 32px;
    line-height: 32px;
    padding: 0 3px;
    top: 0;
    z-index: 99;
    cursor: pointer;
  }
  .arrow-btn-left {
    box-shadow: @shadow-1-right;
    left: 0;
  }
  .arrow-btn-right {
    box-shadow: @shadow-1-left;
    right: 0;
  }
}
.nav-tabs-box {
  overflow-x: scroll;
}
.nav-tabs-box::-webkit-scrollbar {
  display: none !important;
}
.nav-tabs-scroll {
  display: inline-flex;
  flex-wrap: nowrap;
  width: auto;
}
.nav-tab-margin {
  margin: 0 24px;
}
.tab-item {
  background: @primary-3;
  border-color: @primary-3;
  color: @primary-6;
  transition: all 0.6s;

  .icon {
    font-size: 0;
    display: inline-block;
    margin-left: 6px;
    transition: all 0.6s;
  }
}

.tab-item-active,
.tab-item:hover {
  background: @primary-6;
  border-color: @primary-6;
  color: @btn-primary-color;
  padding: 4px 8px;
  .icon {
    font-size: 14px;
  }
}

.tab-item:not(:first-child) {
  margin-left: 10px;
}

.is-affix {
  padding: 4px 15px !important;
}
</style>